<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/model/login/login.css">
</head>
<body>
	<!-- 定义容器 -->
	<div class="container">
		<div class="row">
			<div class="col-md-4 col-sm-3"></div>

			<!-- 这一列为登陆表单 -->
			<div class="col-md-4 col-sm-6">
				<div class="panel panel-default">

					<!-- 登陆面板的标题 -->
					<div class="panel-title" style="text-align: center">
						<h2>登录</h2>
					</div>

					<!-- 登陆面板的主体 -->
					<div class="panel-body">

						<!-- 表单 -->
						<form id="login_form" class="form-horizontal" style="">

							<div class="form-group">
								<label class="control-label col-md-4 col-sm-4">用户ID：</label>
								<div class="col-md-7 col-sm-7">
									<input type="text" id="userName" class="form-control"
										placeholder="用户ID" name="userID" />
								</div>
							</div>

							<div class="form-group">
								<label class="control-label col-md-4 col-sm-4"> <!-- <span class="glyphicon glyphicon-lock"></span> -->
									密码：
								</label>
								<div class="col-md-7 col-sm-7">
									<input type="password" id="passWord" class="form-control"
										placeholder="密码" name="password">
								</div>
							</div>

							<div class="form-group">
								<label class="control-label col-md-4 col-sm-4"> <!-- <span class="glyphicon glyphicon-lock"></span> -->
									角色：
								</label>
								<div class="col-md-7 col-sm-7" style="margin-top: 5px">
									<label><input name="relo" type="radio" value="0" />管理员 </label>
									<label><input style="margin-left: 15px" name="relo" type="radio" value="2" />教师 </label>
								</div>
							</div>

							<div>
								<div class="col-md-4 col-sm-4"></div>
								<div class="col-md-4 col-sm-4">
									<button id="submit" type="submit" class="btn btn-primary">
										&nbsp;&nbsp;&nbsp;&nbsp;登&nbsp;录&nbsp;&nbsp;&nbsp;&nbsp;</button>
								</div>
								<div class="col-md-4 col-sm-4"></div>
							</div>
						</form>
					</div>
				</div>
			</div>

			<div class="col-md-4 col-sm-3"></div>
		</div>
	</div>

	<script type="text/javascript"
		src="${pageContext.request.contextPath}/js/jquery-2.2.3.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/js/bootstrapValidator.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/js/jquery.md5.js"></script>
	<script type="text/javascript"
			src="${pageContext.request.contextPath}/js/store.legacy.min.js"></script>
	<script>
		$(function() {

			validatorInit();
			refreshCheckCode();
		});

		// 刷新图形验证码
		function refreshCheckCode() {
			$('#checkCodeImg').click(function() {
				$(this).attr("src", "/onlineEdu/account/checkCode/" + new Date().getTime())
			})
		}

		// 登陆信息加密模块
		function infoEncrypt(userID, password, checkCode) {
			var str1 = $.md5(password);
			var str2 = $.md5(str1 + userID);
			var str3 = $.md5(str2 + checkCode.toUpperCase());
			return str3;
		}

		function validatorInit() {

			$('#login_form').bootstrapValidator({
             //   window.location.href = "/onlineEdu/views/mainPage";
				message : 'This value is not valid',
				feedbackIcons : {
					valid : 'glyphicon glyphicon-ok',
					invalid : 'glyphicon glyphicon-remove',
					validating : 'glyphicon glyphicon-refresh'
				},
				fields : {
					userID : {
						validators : {
							notEmpty : {
								message : '用户名不能为空'
							},regexp: {
		                        regexp: '[0-9]+',
		                        message: '只允许输入数字'
		                    },
							callback : {}
						}
					},
					password : {
						validators : {
							notEmpty : {
								message : '密码不能为空'
							},
							callback : {}
						}
					},
                    relo : {
						validators : {
							notEmpty : {
								message : '角色不能为空'
							}
						}
					}
				}
			})
			.on('success.form.bv', function(e) {
			    var postData = {
                    userName: $("#userName").val(),
                    passWord:$("#passWord").val(),
                    userRole:$("input[name='relo']:checked").val()
                }
                if(!(postData.userName&&postData.passWord&&postData.userRole)) {
                    alert("请填写完整！", "提示");
                    return ;
                }
                $.ajax({
                    type:'POST',
                    dataType:"json",
					url:'/onlineEdu/account/login',
                    data:postData,
                    success:function(response){
                        if(response.success){
                            store.set('userId', response.userId);
                            store.set('userRole', response.userRole);
                            store.set('userRealName', response.userRealName);
                            window.location.href = "/onlineEdu/views/mainPage";
						}else{
                            alert(response.msg);
                            location.reload();
						}
                    }, error:function(data){
                        location.reload();
                        alert("登录失败！");
                    }
                });
			});
		}
	</script>
</body>
</html>